export default {
    data() {
        return {
            // 离各个边角距离多少会有翻页的效果
            tiggerOption: {
                x: 100,
                y: 150
            },
            position: 'lt', // 通过翻页位置设置旋转点 lt rt lb rb 
            moveOption: {
                startX: 0,
                startY: 0,
                moveX: 0,
                moveY: 0
            },
            // 页面的宽 高
            clientHeight: 0,
            clientWidth: 0,
            sqrt: 0, // 斜边长

        }
    },
    methods: {
        // 更新内容区域遮罩层数据
        updateContentMainStyle(SDX, SDY, angle) {
            // 动画效果的样式
            this.effectStyle = {
                ...this.effectStyle,
                ...this.setTransform(
                    this.translate3D(
                        this.setSize(SDX),
                        this.setSize(SDY)
                    )
                    + this.rotate(-angle)
                ),
            };
        },
        // 更新内容区域数据
        updateContentStyle(SDX, SDY, angle) {
            this.contentStyle = {
                ...this.contentStyle,
                ...this.setTransform(
                    this.rotate(angle) +
                    this.translate3D(
                        this.setSize(SDX),
                        this.setSize(SDY)
                    )
                ),
            };
        },
        // 翻角效果中角的样式
        updateHornStyle(SDX, SDY, angle , option) {
            this.hornStyle = {
                ...this.hornStyle,
                ...this.setTransform( 
                    this.translate3D(
                        this.setSize(SDX),
                        this.setSize(SDY)
                    )
                    + this.rotate(angle)
                ),
                ...option
            };
        },
        // 设置旋转点
        setTransformOrigin() {
            if (this.position == "rt") {
                this.effectStyle["transform-origin"] = "0% 0%";
                this.hornStyle["transform-origin"] = "0% 0%";
                this.contentStyle["transform-origin"] = "0% 0%";
            } else if (this.position == "lt") {
                this.effectStyle["transform-origin"] = "100% 0%";
                this.hornStyle["transform-origin"] = "100% 0%";
                this.contentStyle["transform-origin"] = "100% 0%";
            } else if (this.position == "rb") {
                this.effectStyle["transform-origin"] = "0% 100%";
                this.hornStyle["transform-origin"] = "0% 100%";
                this.contentStyle["transform-origin"] = "0% 100%";
            } else if (this.position == "lb") {
                this.effectStyle["transform-origin"] = "100% 100%";
                this.hornStyle["transform-origin"] = "100% 100%";
                this.contentStyle["transform-origin"] = "100% 100%";
            }
        },
        setBackgroundImage({PX, PY,X, Y }){
            return {
                'background-image': `-webkit-gradient(linear, ${PX} ${PY}, ${X} ${Y}, from(rgba(0, 0, 0, 0)), color-stop(1, rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0.2)))`,
                // 'background-image': `gradient(linear, 0% 0%, 5.47046% 3.88802%, from(rgba(0, 0, 0, 0)), color-stop(0.8, rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0.2)))`,
            }
        },
        setContentStyleBackgroundImage({PX, PY,X, Y }){
            return {
                'background-image': `-webkit-gradient(linear, ${PX} ${PY}, ${X} ${Y}, from(rgba(0, 0, 0, 0)), color-stop(0.8, rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0.2)))`,
                // 'background-image': `gradient(linear, 0% 0%, 5.47046% 3.88802%, from(rgba(0, 0, 0, 0)), color-stop(0.8, rgba(0, 0, 0, 0.2)), to(rgba(255, 255, 255, 0.2)))`,
            }
        },
        initDIV() {

            if (this.position == "lt") {
                // 显示的内容
                this.contentStyle = {
                    top: 0,
                    left: this.setSize(this.sqrt - this.clientWidth),
                    width: this.setSize(this.clientWidth),
                    height: this.setSize(this.clientHeight),
                    ...this.setTransform(this.rotate(0))
                }
                // 动画效果的样式
                this.effectStyle = {
                    width: this.setSize(this.sqrt),
                    height: this.setSize(this.sqrt),
                    top: 0,
                    left: this.setSize(this.clientWidth - this.sqrt),
                    ...this.setTransform(
                        this.translate3D(
                            0, 0
                        ) + this.rotate(0)
                    )
                };
                // 翻角效果中角的样式
                this.hornStyle = {
                    width: this.setSize(this.clientWidth),
                    height: this.setSize(this.clientHeight),
                    top: 0,
                    left: this.setSize(this.sqrt - this.clientWidth),
                    ...this.setTransform(
                        this.rotate(90) + this.translate3D(0, 0) + this.rotate(360)
                    )
                };
            } else if (this.position == "rt") {
                // 显示的内容
                this.contentStyle = {
                    top: 0,
                    left: 0,
                    width: this.setSize(this.clientWidth),
                    height: this.setSize(this.clientHeight),
                    ...this.setTransform(this.rotate(0))
                }
                // 动画效果的样式
                this.effectStyle = {
                    width: this.setSize(this.sqrt),
                    height: this.setSize(this.sqrt),
                    top: 0,
                    left: 0,
                    ...this.setTransform(
                        this.translate3D(
                            0, 0
                        ) + this.rotate(0)
                    )
                };
                // 翻角效果中角的样式
                this.hornStyle = {
                    width: this.setSize(this.clientWidth), 
                    height: this.setSize(this.clientHeight),
                    top: 0, 
                    left: 0,
                    ...this.setTransform( 
                        this.rotate(90) + this.translate3D(0, 0) + this.rotate(360)
                    )
                };
            } else if (this.position == "rb") {
                // 显示的内容
                this.contentStyle = {
                    top: this.setSize(this.sqrt - this.clientHeight),
                    left: 0,
                    width: this.setSize(this.clientWidth),
                    height: this.setSize(this.clientHeight),
                    ...this.setTransform(this.rotate(0))
                }
                // 动画效果的样式
                this.effectStyle = {
                    width: this.setSize(this.sqrt),
                    height: this.setSize(this.sqrt),
                    top: this.setSize(this.clientHeight - this.sqrt),
                    left: 0,
                    ...this.setTransform(
                        this.translate3D(
                            0, 0
                        ) + this.rotate(0)
                    )
                };
                // 翻角效果中角的样式
                this.hornStyle = {
                    width: this.setSize(this.clientWidth),
                    height: this.setSize(this.clientHeight),
                    top: this.setSize(this.sqrt - this.clientHeight),
                    left: 0,
                    ...this.setTransform( 
                        this.rotate(90) + this.translate3D(0, 0) + this.rotate(360)
                    )
                };
            } else if (this.position == "lb") {
                // 显示的内容
                this.contentStyle = {
                    top: this.setSize(this.sqrt - this.clientHeight),
                    left: this.setSize(this.sqrt - this.clientWidth),
                    width: this.setSize(this.clientWidth),
                    height: this.setSize(this.clientHeight),
                    ...this.setTransform(this.rotate(0))
                }
                // 动画效果的样式
                this.effectStyle = {
                    width: this.setSize(this.sqrt),
                    height: this.setSize(this.sqrt),
                    top: this.setSize(this.clientHeight - this.sqrt),
                    left: this.setSize(this.clientWidth - this.sqrt),
                    ...this.setTransform(
                        this.translate3D(
                            0, 0
                        ) + this.rotate(0)
                    )
                };
                // 翻角效果中角的样式
                this.hornStyle = {
                    width: this.setSize(this.clientWidth),
                    height: this.setSize(this.clientHeight),
                    top: this.setSize(this.sqrt - this.clientHeight),
                    left: this.setSize(this.sqrt - this.clientWidth),
                    ...this.setTransform( 
                        this.rotate(90) + this.translate3D(0, 0) + this.rotate(360)
                    )
                };
            }

        },
        translate3D(x, y) {
            return " translate3d(" + x + "," + y + ", 0px) "
            // : " translate(" + x + "px, " + y + "px) ";
        },
        rotate(degrees) {
            return " rotate(" + degrees + "deg) ";
        },
        has(property, object) {
            return Object.prototype.hasOwnProperty.call(object, property);
        },
        setSize(size) {
            return `${size}px`
        },
        setTransform(option) {
            return {
                '-webkit-transform': option,
                'transform': option,
            }
        },

        //已知角度和斜边，求直角边
        hypotenuse(long, angle) {
            //获得弧度
            var radian = 2 * Math.PI / 360 * (90 - angle);
            return {
                x: Math.sin(radian) * long,//邻边
                y: Math.cos(radian) * long//对边
            };
        },

        /**
         *  两点获得角度
         * @param {*} px  起点
         * @param {*} py  起点
         * @param {*} mx  终点
         * @param {*} my  终点
         */
        getAngle({
            startX,
            startY,
            moveX,
            moveY
        }) {//获得人物中心和鼠标坐标连线，与y轴正半轴之间的夹角
            let px = startX
            let py = startY
            let mx = moveX
            let my = moveY
            var x = Math.abs(px - mx);
            var y = Math.abs(py - my);
            var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
            var cos = y / z;
            var radina = Math.acos(cos);//用反三角函数求弧度
            // var angle = Math.floor(180 / (Math.PI / radina));//将弧度转换成角度 
            var angle = 180 / (Math.PI / radina);//将弧度转换成角度 
            // if (mx > px && my > py) {//鼠标在第四象限
            //     angle = 180 - angle;
            // }
            // if (mx == px && my > py) {//鼠标在y轴负方向上
            //     angle = 180;
            // }
            // if (mx > px && my == py) {//鼠标在x轴正方向上
            //     angle = 90;
            // }
            // if (mx < px && my > py) {//鼠标在第三象限
            //     angle = 180 + angle;
            // }
            // if (mx < px && my == py) {//鼠标在x轴负方向
            //     angle = 270;
            // }
            // if (mx < px && my < py) {//鼠标在第二象限
            //     angle = 360 - angle;
            // }
            return angle;
        }
    }
};